<template>
  <div class="home">
    <el-container>
      <el-header>
        <div class="header_wrap">
          <div class="header_logo">
            <img src="../../assets/logo.png" alt="" />
            <div class="title">
              <h3>手机麻麻后台管理系统</h3>
            </div>
          </div>
          <div class="quit_wrap">
            <el-button type="info" @click="quit">退出</el-button>
          </div>
        </div>
      </el-header>
      <el-container>
           
        <el-aside :width="isCollapse?'64px':'200px'" class="aside-wrap">
           <div class="control" @click="control">|||</div>
          <aside-box :MenuList = "menulist" :current="isCollapse"></aside-box>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import asideBar from "./base/asideBar";
export default {
  name: "home",
  data() {
    return {
        menulist:[],
        isCollapse:false
    };
  },

  methods: {
    quit() {
      window.sessionStorage.clear();
      this.$message.info("退出登录");
      this.$router.push("/login");
    },
    control(){
        this.isCollapse = !this.isCollapse
    }
  },
  components: {
    "aside-box": asideBar,
  },
  created(){
       this.$http.get('/menus').then(res=>{
                let {data,meta} = res
            if(meta.status == "200"){
                  this.menulist = data
                  console.log(data)
            }else{
                this.$$message.error("获取失败")
            }
    })
  }
};
</script>
<style scoped lang="less">
.home {
  height: 100vh;
}
.el-header {
  background-color: #373f41;
  color: #333;
  text-align: center;
}

.el-aside {
  overflow-x: hidden;
  color: #333;
  text-align: center;
  height: 90vh;
background-color:#333744;
 
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  height: 90vh;
}

//   body > .el-container {
//     margin-bottom: 40px;
//   }
.header_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .header_logo {
    display: flex;
    align-items: center;
    color: #fff;
    img {
      height: 60px;
      width: 60px;
    }
  }
}
.control{
    background-color: #475162;
    color: #fff;
    font-size: 20px;
    height: 30px;
    letter-spacing: 3px;
    padding: 0;
    cursor: pointer;
    font-weight: bold;
    user-select: none;
}
</style>